<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>太工教育</title>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/rem.js"></script>
		<link rel="stylesheet" href="css/reset.css">
	</head>
	<body style="background-color: #F6F7F9;">
		<div class="max">
			<div class="functions">
				<p>忘记密码</p>
			</div>
		
			<div class="box">
				<div class="lsitem">
					<input type="text" id="" value="" placeholder="手机号"/>
				</div>
				<div class="lsitem">
					<input type="text" id="" value="" placeholder="验证码"/>
					<input class="gain" type="button" value="获取验证码">
				</div>
				<div class="lsitem">
					<input type="text" id="" value="" placeholder="设置新密码"/>
				</div>
				<div class="lsitem">
					<input type="text" id="" value="" placeholder="确认新密码"/>
				</div>
				<div class="buts">
					<p>保存</p>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var istime = true;
		$(".gain").click(function() {
			if (istime) {
				getCode($(this), 30)
			}
		})
	
		//获取验证码
		function getCode(a, n) { //a:DOM节点,n:倒数秒数
			istime = false;
			a.val(n + "s");
			var times = setTimeout(changetime, 1000);
	
			function changetime() {
				if (n > 0) {
					n--;
					a.val(n + "s");
					times = setTimeout(changetime, 1000);
				} else {
					clearTimeout(times);
					a.val("重新获取");
					istime = true;
				}
			}
		}
	</script>

	<style>
		.csccolumn_conten {
			padding-top: 0.36rem;
		}

		.banner {
			width: 100%;
			position: relative;
		}

		.banner img {
			width: 100%;
		}

		.max{
			margin: 0.5rem 1.54rem 0.91rem;
			display: flex;
			align-items: flex-start;
			background-color: #fff;
			padding: 0.4rem;
		}
		.functions{
			width: 2rem;
			display: flex;
			align-items: center;
		}
		.functions img{
			width: 0.2rem;
			margin-right: 0.14rem;
		}
		.functions p{
			font-size: 0.18rem;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #514B89;
			line-height: 0.18rem;
		}
		.box {
			width: 6rem;
			padding: 1rem 0;
			background: #FCFDFD;
		}
		.lsitem{
			width: 4rem;
			height: 0.5rem;
			border: 0.01rem solid #ddd;
			margin-bottom: 0.2rem;
			display: flex;
			align-items: center;
			padding: 0 0.1rem;
		}
		.lsitem input{
			width: 100%;
			border: none;
		}
		.buts{
			width: 1.5rem;
			height: 0.42rem;
			background: #30337A;
			margin: 0.4rem  1.4rem 0.2rem;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
		}
		.buts p{
			font-size: 0.16rem;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 0.16rem;
		}
		.gain {
			width: auto !important;
		    font-size: 0.15rem;
		    font-family: PingFang SC;
		    font-weight: 400;
		    color: #30337A;
		    cursor: pointer;
		    background: none;
			margin-right: 0.05rem;
		}
	</style>
</html>
